	<?php include 'views/header.php';?>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

		  <div class="content">

		      <!--左边开始-->
			  <?php /*include 'views/home/left.php';*/?>
			  <!--左边结束-->


			  <!--右边开始-->
			  <div class="main_right">

				  <!--<form method="post" action="<?php /*echo $url;*/?>"> </form>-->

                  <div id="dataForm">

                      表数据: &nbsp;
                      <select name="host_id" class="host_id" onchange="tableA1()">
                          <?php
                          foreach ($list as $v){
                              ?>
                              <option id="<?php  echo $v['id']; ?>" value="<?php  echo $v['host_id']; ?>"><?php  echo $v['name']; ?></option>
                              <?php
                          }
                          ?>
                      </select>

                      <select name="dataStype" class="dataType" id="dataType">
                          <option  value="1"  selected> tcpconn </option>
                          <option  value="2"  > tcpwait </option>
                      </select>

                      <select name="timeStype" class="timeType">
                          <option  value="latest"  selected> 实时 </option>
                          <option  value="10mins"  > 10分钟 </option>
                          <option  value="30mins"  > 30分钟 </option>
                          <option  value="60mins"  > 1小时 </option>
                          <option  value="180mins"  > 3小时 </option>
                      </select>

                      <button type="submit" onclick="submitData()" >提 交</button>

                  </div>


                  <!--表格数据显示框-->
                  <div id="mtable" style="height: 400px; min-width: 310px"></div>

                  <!--Host表数据-->
                  <table class="aui">
                      <thead>
                      <tr>
                          <th id="name">Name</th>
                          <th id="type">Items_id</th>
                          <th id="action">key</th>
                          <th id="action">Value_type</th>
                          <th id="order">Host_id</th>
                          <th id="order">操作</th>
                      </tr>
                      </thead>
                      <tbody>

                      <?php
                      foreach ($itemList as $v){
                      ?>

                          <tr>
                              <td headers="name"><?php echo $v['id'] ?></td>
                              <td headers="items_id"><?php echo $v['items_id'] ?></td>
                              <td headers="key"><?php echo $v['key'] ?></td>
                              <td headers="value_type"><?php echo $v['value_type'] ?></td>
                              <td headers="host_id"><?php echo $v['host_id'] ?></td>
                              <td headers="button">
                                  <button class="aui-button" id="dialog-button<?php echo $v['id'] ?>" onclick="showDiolg('<?php echo $v[items_id]?>','<?php echo $v[host_id] ?>')">显示数据</button>
                              </td>
                              <!--<td class="order" headers="order">
                                  <ul class="menu">
                                      <li>
                                          <a class="down" href="#">Down</a>
                                      </li>
                                  </ul>
                              </td>-->
                          </tr>

                      <?
                      }
                      ?>


                      </tbody>
                  </table>
			  </div>
			  <!--右边结束-->
		  </div>



    <script>

        /*Ajax获取选择项数据*/
        function tableA1(){
            var hostid = $(".host_id").val();  // 获取 select选择值
            $.get("index.php?c=mtest&a=sTableA1",{"hostid":hostid},function(data,status){
                if(status=="success"){
                  var json = JSON.parse(data) ;
                    var selectHtml ="";
                    for (var i = 0 ; i<json.length; i++) {
                        selectHtml +="<option value='"+json[i]['items_id']+"'>"+json[i]['key']+"</option>" ;
                    }
                    document.getElementById('dataType').innerHTML = selectHtml ;
                }
            });
        }

        function submitData(){

            var hostid = $(".host_id").val();
            var itemsid = $(".dataType").val();
            var timetype = $(".timeType").val();


            $.getJSON("index.php?c=mtest&a=sTableA2", { hostid: hostid, itemsid: itemsid,timetype: timetype }, function(data){

                var graphTitle = '监控指标 avg  不同监控设备  实时报表';
                $('#mtable').highcharts('StockChart', {
                    title : {
                        text : graphTitle
                    },
                    tooltip:{
                        crosshairs: true,
                        shared: true,
                        // 日期时间格式化
                        xDateFormat: '%Y-%m-%d %H:%M:%S'
                    },
                    credits:{
                        enabled: false,
                    },
                    exporting: {enabled: true},
                    rangeSelector: {
                        // 缩放选择按钮，是一个数组。
                        // 其中type可以是： 'millisecond', 'second', 'minute', 'day', 'week', 'month', 'ytd' (year to date), 'year' 和 'all'。
                        // 其中count是指多少个单位type。
                        // 其中text是配置显示在按钮上的文字
                        buttons: [{
                            type: 'minute',
                            count: 60,
                            text: '1时'
                        }, {
                            type: 'minute',
                            count: 180,
                            text: '6时'
                        }, {
                            type: 'minute',
                            count: 360,
                            text: '12时'
                        }, {
                            type: 'day',
                            count: 1,
                            text: '1天'
                        },{
                            type: 'all',
                            text: '所有'
                        }],
                        // 默认选择域：0（缩放按钮中的第一个）、1（缩放按钮中的第二个）……
                        selected: 0,
                        // 是否允许input标签选框
                        inputEnabled: true
                    },
                    xAxis:{
                        // 如果X轴刻度是日期或时间，该配置是格式化日期及时间显示格式
                        dateTimeLabelFormats: {
                            second: '%Y-%m-%d<br/>%H:%M:%S',
                            minute: '%Y-%m-%d<br/>%H:%M',
                            hour: '%Y-%m-%d<br/>%H:%M',
                            day: '%Y<br/>%m-%d',
                            week: '%Y<br/>%m-%d',
                            month: '%Y-%m',
                            year: '%Y'
                        }
                    },
                    legend: {
                        align: 'center',
                        x: 0,
                        y: 0,
                        borderWidth: 0,
                        enabled:true,
                        labelFormatter: function () {
                            return this.name;
                        },
                    },
                    series : []
                });

                var items = "0,0" ;
                for(var i=0;i<data.length;i++){
                    items += ","+data[1]+","+data[0] ;
                }

                var chart = $('#mtable').highcharts();
                var graphData = items ;

                tmpdata = { data : graphData } ;
                console.log(tmpdata) ;
                chart.addSeries(
                    {data:items,tooltip:{valueDecimals:2}}
                    );

               /* for(var key in graphData){
                    tmpdata = {
                        name : key,
                        data : graphData[key],
                    }
                    console.log(tmpdata)
                    chart.addSeries({
                        name : key,
                        data : graphData[key],
                        tooltip: {
                            valueDecimals: 2
                        }
                    })
                }*/

                chart.legend.display = true;
            });


        }

        function AjaxData(data){
            alert(data);

            var start = +new Date();
            // Create the chart

            $('#mtable').highcharts('StockChart', {
                chart: {
                    events: {
                        load: function () {
                            if (!window.isComparing) {
                                this.setTitle(null, {
                                    text: 'Built chart in ' + (new Date() - start) + 'ms'
                                });
                            }
                        }
                    },
                    zoomType: 'x'
                },
                rangeSelector: {
                    buttons: [{
                        type: 'day',
                        count: 3,
                        text: '3d'
                    }, {
                        type: 'week',
                        count: 1,
                        text: '1w'
                    }, {
                        type: 'month',
                        count: 1,
                        text: '1m'
                    }, {
                        type: 'month',
                        count: 6,
                        text: '6m'
                    }, {
                        type: 'year',
                        count: 1,
                        text: '1y'
                    }, {
                        type: 'all',
                        text: 'All'
                    }],
                    selected: 3
                },
                yAxis: {
                    title: {
                        text: 'Temperature (°C)'
                    }
                },
                title: {
                    text: 'Hourly temperatures in Vik i Sogn, Norway, 2004-2010'
                },
                subtitle: {
                    text: 'Built chart in ...' // dummy text to reserve space for dynamic subtitle
                },
                series: [{
                    name: 'Temperature',
                    data: data,
                    pointStart: Date.UTC(2010, 3, 1),
                    pointInterval: 3600 * 1000,
                    tooltip: {
                        valueDecimals: 1,
                        valueSuffix: '°C'
                    }
                }]
            });

        }


        $(function () {
            $.getJSON('http://www.hcharts.cn/datas/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
                // Create the chart
                alert(data);
                $('#mtable').highcharts('StockChart', {
                    rangeSelector : {
                        selected : 1
                    },
                    title : {
                        text : 'AAPL Stock Price'
                    },
                    series : [{
                        name : 'AAPL',
                        data : data,
                        tooltip: {
                            valueDecimals: 2
                        }
                    }]
                });
            });
        });


    </script>




    <script src="https://code.highcharts.com/stock/highstock.js"></script>
    <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
    <!--<script type="text/javascript" src="http://cdn.hcharts.cn/highstock/highstock.js"></script>-->


<?php include 'views/footer.php';?>
